<template>
  <div class="getUser">
    <div class="user-type">
      <button
        open-type="getUserInfo"
        lang="zh_CN"
        @getuserinfo="landlordLogin">我是房东</button>
      <button
        open-type="getUserInfo"
        lang="zh_CN"
        @getuserinfo="tennatLogin">我是租户</button>
    </div>
    <!-- <img class="img" mode="aspectFit" :src="imgUrl" alt=""> -->
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { ERR_OK } from 'api/config'
import { getRole } from 'api/app'
import { getUserWxAutoLogin, getFirstImg } from 'api/getUser'
import { wxLogin } from 'api/login'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  created () {
    // this.getFirstImg()
    // setTimeout(() => {
    //   this.getUserWxAutoLogin()
    // }, 5000)
  },
  computed: {
    ...mapState([
      'isTenantLogin'
    ])
  },
  data () {
    return {
      imgUrl: ''
    }
  },
  methods: {
    landlordLogin (e) {
      this.SET_ISTENANTLOGIN(false)
      this.getUserInfo(e)
    },
    tennatLogin (e) {
      this.SET_ISTENANTLOGIN(true)
      this.getUserInfo(e)
    },
    clearUserInfo () {
      wx.removeStorageSync('openid')
      wx.removeStorageSync('userInfo')
      wx.removeStorageSync('realUserInfo')
      wx.redirectTo({
        url: '/pages/login/main'
      })
    },
    getRole () {
      return new Promise(async (resolve, reject) => {
        const res = await getRole()

        if (res.code === ERR_OK) {
          this.SET_ROLE(res.data)

          wx.redirectTo({
            url: '/pages/home/main'
          })
        }

        resolve()
      })
    },
    getUserWxAutoLogin () {
      return new Promise(async (resolve, reject) => {
        let openid = wx.getStorageSync('openid')

        if (!openid) {
          const res = await wxLogin()

          if (res.code === ERR_OK) {
            openid = res.result.data.openid

            wx.setStorageSync('openid', openid)
          } else {
            this.$showToast({
              title: '服务器出错',
              icon: 'none',
              success () {
                resolve()
              }
            })

            return
          }
        }

        this.SET_OPENID(openid)

        const res = await getUserWxAutoLogin(this.isTenantLogin)

        if (res.code === ERR_OK) {
          const realUserInfo = res.data
          this.SET_REALUSERINFO(realUserInfo)
          wx.setStorageSync('realUserInfo', realUserInfo)

          if (!this.isTenantLogin) {
            await this.getRole()
          } else {
            wx.redirectTo({
              url: '/pages/homeTenant/main'
            })
          }
        } else {
          this.clearUserInfo()
        }

        resolve()
      })
    },
    async getUserInfo (e) {
      this.$showLoading('请稍后')

      if (e.target.userInfo) {
        this.SET_USERINFO(e.target.userInfo)

        wx.setStorageSync('userInfo', e.target.userInfo)

        await this.getUserWxAutoLogin()

        this.$hideLoading()
      } else {
        this.$showToast({
          title: '授权失败',
          icon: 'none',
          success () {
            this.$hideLoading()
          }
        })
      }
    },
    async getFirstImg () {
      const res = await getFirstImg()

      if (res.code === ERR_OK && res.data.length) {
        this.imgUrl = res.data[0].imageUrl
      }
    },
    ...mapMutations([
      'SET_USERINFO',
      'SET_OPENID',
      'SET_REALUSERINFO',
      'SET_ISTENANTLOGIN',
      'SET_ROLE'
    ])
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .getUser {
    width: 100%;
    height: 100%;
    position: relative;
    > .user-type {
      width: 70%;
      height: 112px;
      position: fixed;
      left: 0;
      right: 0;
      top: -10px;
      bottom: 0;
      margin: auto;
      > button {
        background-color: $color-default;
        color: white;
        &:nth-of-type(1) {
          margin-bottom: 20px;
        }
      }
    }
    > .img {
      width: 100%;
      height: 100%;
    }
  }
</style>
